<template>
	<div class="settings-sessions-nav flex items-center h-12 gap-3">
		<div class="flex-auto" />
		<div class="flex items-center gap-2 flex-shrink-0">
			<span>{{ $t('set.session.loginStatus') }}</span>
			<NSwitch size="large" @update:value="handleLoginStatus" />
		</div>
		<BaseButton class="default" :block="false" @click="handleLogoutOther">
			<span>{{ $t('set.session.logoutOther') }}</span>
			<BaseIcon class="ml-1" name="quit" size="20" />
		</BaseButton>
	</div>
</template>

<script setup lang="ts">
import { NSwitch } from 'naive-ui'
import { BaseButton, BaseIcon } from '@/components/base'
import { bus } from '@/utils/lib/event-bus'
import { SETTINGS_SESSIONS_LOGIN_STATUS, SETTINGS_SESSIONS_LOGOUT_OTHER } from '@/constants'

const handleLoginStatus = (val: boolean) => bus.$emit(SETTINGS_SESSIONS_LOGIN_STATUS, val)
const handleLogoutOther = () => bus.$emit(SETTINGS_SESSIONS_LOGOUT_OTHER)
</script>

<style scoped></style>
